<template>
	<div>
		<div class="font-size18 font-bold margin-bottom20 color252630">专题评论</div>
		<el-form inline :model="query" label-width="80">
			<el-form-item label="模糊搜索">
				<el-input placeholder="请输入用户昵称、手机号、评论内容" v-model="query.key" class="width260 margin-right30"></el-input>
			</el-form-item>
			<el-button type="primary" icon="el-icon-search" class="margin-left10" @click="handleSearch">搜索</el-button>
			<el-button type="default" icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
		</el-form>
		<div class="row-me">
			<el-button type="primary" @click="handleEdit">新增虚拟评价</el-button>
			<el-button type="primary" @click="batchDel">批量删除</el-button>
			<el-button type="primary" @click="typeVisible=true">评价标签管理</el-button>
			<div class="flex1"></div>
			<el-button type="primary" @click="configVisible=true">评论审核配置</el-button>
		</div>
		<el-table :data="tableData" border class="margin-top20" header-cell-class-name="table-header-style"
			@selection-change="handleSelectionChange">
			<el-table-column type="expand" width="0">
				<template slot-scope="scope">
					<div class="row-me flex-wrap" v-if="scope.row.images">
						<el-image fit="scale-down" v-for="(item,index) in scope.row.images.split(',')" :key="index" :src="item"
							class="width80 width80 margin-right10 radius6" :preview-src-list="[item]"></el-image>
					</div>
				</template>
			</el-table-column>
			<el-table-column type="selection" align="center"></el-table-column>
			<el-table-column type="index" width="80" align="center" label="序号"></el-table-column>
			<el-table-column label="专题信息">
				<template slot-scope="{row}">
					<div v-if="row.specialSubject" class="row-me row-center">
						<el-image fit="scale-down" :src="row.specialSubject.img" class="width60 height60 margin-right5"
							:preview-src-list="[row.specialSubject.img]"></el-image>
						<span class="line2 flex1">{{row.specialSubject.name||''}}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="userName" label="用户昵称"></el-table-column>
			<el-table-column prop="score" label="评分" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.score" :style="{'color':scope.row.score<4.5?'red':''}">{{scope.row.score}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="content" label="评价内容"></el-table-column>
			<el-table-column label="是否回复" align='center'>
				<template slot-scope="scope">
					<span class="pointer blue-text" @click="already(scope.row)" v-if="scope.row.replay">已回复</span>
					<span v-else>未回复</span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="评论时间" align="center" width="160"></el-table-column>
			<el-table-column label="状态" align="center" width="100">
				<template slot-scope="{row}">
					<span v-if="row.status==0">待审核</span>
					<span v-else-if="row.status==1">审核通过</span>
					<span v-else-if="row.status==2">审核失败</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="260" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="handleStatus(scope.row)" v-if="scope.row.status==0">审核</el-button>
					<el-button type="text" @click="handleReply(scope.row,1)" v-if="!scope.row.commentId">回复</el-button>
					<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button type="text" @click="commentIsTop(scope.row)">{{scope.row.recommend?'取消置顶':'置顶'}}</el-button>
					<el-popconfirm title="确认删除？" @confirm="handleDel(scope.row.id)">
						<el-button slot="reference" type="text">删除</el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<div class="margin-top10">
			<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="query.pageNumber"
				:page-sizes="[30, 40, 50, 60]" @size-change="handleSizeChange" :page-size="query.pageSize" :total="pageTotal"
				@current-change="handlePageChange"></el-pagination>
		</div>

		<!-- 评论审核配置 -->
		<el-dialog title="评论审核配置" :visible.sync="configVisible" width="40%">
			<el-radio-group v-model="commentConfig.value">
				<el-radio label="0">关闭评论</el-radio>
				<el-radio label="1">系统审核</el-radio>
				<el-radio label="2">api审核</el-radio>
				<el-radio label="3">人工审核</el-radio>
				<el-radio label="4">禁止评论</el-radio>
			</el-radio-group>
			<span slot="footer" class="dialog-footer">
				<el-button @click="configVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleConfigSave">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 回复弹框 -->
		<el-dialog title="回复内容" :visible.sync="replyVisible" width="30%">
			<el-input type="textarea" :rows="4" placeholder="请输入回复内容" v-model="commentParams.storeComment">
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="replyVisible = false">取 消</el-button>
				<el-button type="primary" @click="commentSave">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 新增编辑弹出框 -->
		<el-dialog :title="title" :visible.sync="editVisible" width="600px">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="选择专题">
					<el-select placeholder="请选择专题" class="width100Per" v-model="form.specialId">
						<el-option v-for="(item,index) in specialData" :key="index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用户头像">
					<div class="row-me flex-end2">
						<el-image v-if="form.userIcon" class="width80 height80" :src="form.userIcon"
							:preview-src-list="[form.userIcon]"></el-image>
						<el-button type="text" @click="clickImg" class="margin-left10">选择历史头像</el-button>
					</div>
				</el-form-item>
				<el-form-item label="用户名称">
					<el-input placeholder="请输入用户名称" v-model="form.userName"></el-input>
				</el-form-item>
				<el-form-item label="评价内容">
					<el-input placeholder="请输入评价内容" v-model="form.content"></el-input>
				</el-form-item>
				<el-form-item label="商品评分">
					<el-rate v-model="form.score" allow-half class="margin-top10">
					</el-rate>
				</el-form-item>
				<el-form-item label="评价时间">
					<el-date-picker v-model="form.createTime" type="datetime" placeholder="选择评价时间" value-format="yyyy-MM-dd HH:mm"
						format="yyyy-MM-dd HH:mm">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="选择标签">
					<el-select placeholder="请选择" v-model="form.specialLabelIds" multiple>
						<el-option v-for="(item,index) in typeTableData" :key="index" :label="item.name"
							:value="item.id+''"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleEditSave">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 评价标签管理 -->
		<el-dialog title="评价标签管理" :visible.sync="typeVisible" width="40%">
			<el-table :data="typeTableData" border>
				<el-table-column label="标签名称" align="center">
					<template slot-scope="{row}">
						<el-input v-model="row.name" v-if="row.isEdit"></el-input>
						<span v-else>{{row.name}}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="200">
					<template slot-scope="scope">
						<el-button type="text" v-if="scope.row.isEdit" @click="handleTypeAdd(scope.row)">保存</el-button>
						<el-button type="text" @click="$set(scope.row,'isEdit',true)" v-else>编辑</el-button>
						<el-popconfirm title="确认删除？" @confirm="handleTypeDel(scope.row.id)">
							<el-button slot="reference" type="text">删除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="typeQuery.pageNumber"
					:page-sizes="[10, 20, 30, 40]" @size-change="handleSizeTypeChange" :page-size="typeQuery.pageSize"
					:total="pageTypeTotal" @current-change="handlePageTypeChange"></el-pagination>
			</div>
			<div class="margin-top20 row-me center-all">
				<el-input v-model="typeQuery.name" placeholder="请输入分类名称" class="margin-right20 width300"
					@input="$forceUpdate()"></el-input>
				<el-button type="primary" @click="handleTypeAdd">新增</el-button>
			</div>
			<span slot="footer">
				<el-button type="primary" @click="typeVisible = false">关 闭</el-button>
			</span>
		</el-dialog>

		<!-- 审核 -->
		<el-dialog title="审核" :visible.sync="examineVisible" width="600px">
			<el-form :model="examineForm">
				<el-form-item label="状态">
					<el-select placeholder="请选择" v-model="examineForm.status" class="width300">
						<el-option label="审核通过" :value="1"></el-option>
						<el-option label="审核失败" :value="2"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button @click="examineVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleExaminSave">确 认</el-button>
			</span>
		</el-dialog>

		<!-- 已回复弹框 -->
		<el-dialog title="已回复评价" :visible.sync="dialogVisibleAlready" width="30%">
			<el-form :model="commentReply" label-width="100px">
				<el-form-item label="评价内容:">
					<span>{{commentReply.name}}</span>
				</el-form-item>
				<el-form-item label="评价时间:">
					<span>{{commentReply.commentDate}}</span>
				</el-form-item>
			</el-form>
			<el-table :data="commentReply.list" border>
				<el-table-column label="管理员回复" prop="storeComment" align="center"></el-table-column>
				<el-table-column label="回复时间" prop="createTime" align="center"></el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogVisibleAlready = false">关闭</el-button>
			</span>
		</el-dialog>

		<imgLibrary ref="imgLibrary" @handleImgOk="handleImgOk"></imgLibrary>

	</div>
</template>

<script>
	import imgLibrary from "@/components/imgLibrary"
	export default {
		components: {
			imgLibrary
		},
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				pageTotal: 0,
				tableData: [],
				multipleSelection: [],
				configVisible: false,
				commentConfig: {},
				replyVisible: false,
				commentParams: {},
				form: {},
				editVisible: false,
				title: '',
				specialData: [],
				typeVisible: false,
				typeTableData: [],
				typeQuery: {
					pageNumber: 1,
					pageSize: 10
				},
				pageTypeTotal: 0,
				examineVisible: false,
				examineForm: {},
				dialogVisibleAlready: false,
				commentReply: {
					list: []
				},
			}
		},
		mounted() {
			this.getData()
			this.getByKey()
			this.getPageProduct()
			this.getTypeData()
		},
		methods: {
			// 已回复
			async already(row) {
				const res = await this.$postForm('/admin/specialSubject/commentReplyAll', {
					id: row.id
				})
				this.commentReply.list = res.data
				this.commentReply.name = row.content
				this.commentReply.commentDate = row.createTime
				this.dialogVisibleAlready = true
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			//分类分页
			handlePageTypeChange(val) {
				this.typeQuery.pageNumber = val
				this.getTypeData();
			},
			handleSizeTypeChange(val) {
				this.typeQuery.pageSize = val
				this.getTypeData();
			},
			// 新增编辑分类
			handleTypeAdd(row) {
				let url = '/admin/specialSubject/labelAdd'
				let params = {
					name: this.typeQuery.name
				}
				if (row.id) {
					url = "/admin/specialSubject/labelUpdate"
					params = {
						id: row.id,
						name: row.name
					}
				}
				this.$post(url, params).then(res => {
					if (res.code == 1000) {
						this.$message.success('操作成功')
						this.getTypeData()
						this.typeQuery.name = ''
					}
				})
			},
			//删除分类
			async handleTypeDel(id) {
				const res = await this.$postForm('/admin/specialSubject/labelDeleted', {
					id
				})
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getTypeData()
				}
			},
			//获取分类数据
			async getTypeData() {
				const res = await this.$get('/admin/specialSubject/pageSubjectLabel', this.typeQuery)
				if (res.code == 1000) {
					this.typeTableData = res.data.list
					this.pageTypeTotal = res.data.totalRow
				}
			},
			//评价时间变动
			dateChange(val) {
				this.form.startTime = ''
				this.form.endTime = ''
				if (val && val.length != 0) {
					this.form.startTime = val[0]
					this.form.endTime = val[1]
				}
			},
			//点击图片库
			clickImg() {
				this.$refs.imgLibrary.show()
			},
			//获取选中的图片
			handleImgOk(data) {
				this.$set(this.form, 'userIcon', data)
			},
			//获取专题下拉
			async getPageProduct() {
				const res = await this.$get('/admin/specialSubject/pageSubject', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.specialData = res.data.list
				}
			},
			//获取审核配置详情
			async getByKey() {
				const res = await this.$get('/admin/config/getByKey', {
					key: 'special_api_config'
				})
				if (res.code == 1000) {
					this.commentConfig = res.data
				}
			},
			//批量删除
			async batchDel() {
				if (this.multipleSelection.length == 0) {
					this.$message.warning('请选择批量删除的数据！')
					return
				}
				let ids = Array.from(this.multipleSelection, ({
					id
				}) => id)
				this.$confirm('确定要删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.$post('/admin/specialSubject/commentDeletedAll', ids).then(res => {
						if (res.code == 1000) {
							this.$message.success('批量删除成功')
							this.getData()
						}
					})
				}).catch(() => {});
			},
			//删除
			async handleDel(id) {
				const res = await this.$postForm('/admin/specialSubject/commentDeleted', {
					id
				})
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getData()
				}
			},
			//确认编辑
			async handleEditSave() {
				this.form.specialLabelIds = this.form.specialLabelIds ? this.form.specialLabelIds.toString() : ''
				let url = '/admin/specialSubject/commentAdd'
				if (this.form.id) {
					url = '/admin/specialSubject/commentUpdate'
				}
				const res = await this.$post(url, this.form)
				if (res.code == 1000) {
					this.$message.success('编辑成功')
					this.getData()
					this.editVisible = false
				}
			},
			//置顶
			async commentIsTop(row) {
				let recommend = row.recommend ? false : true
				const res = await this.$postForm('/admin/specialSubject/commentIsTop', {
					id: row.id,
					recommend
				})
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getData()
				}
			},
			//新增编辑
			handleEdit(row) {
				if (row.id) {
					this.title = '编辑虚拟评论'
					this.form = JSON.parse(JSON.stringify(row))
					this.form.specialLabelIds = this.form.specialLabelIds ? this.form.specialLabelIds.split(',') : []
				} else {
					this.title = '新增虚拟评论'
					this.form = {}
				}
				this.editVisible = true
			},
			//审核
			handleStatus(row) {
				this.examineForm = {
					id: row.id
				}
				this.examineVisible = true
			},
			//审核操作
			async handleExaminSave() {
				const res = await this.$post('/admin/specialSubject/commentUpdate', this.examineForm)
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getData()
					this.examineVisible = false
				}
			},
			//回复
			handleReply(row) {
				this.replyVisible = true
				this.commentParams = {
					id: row.id
				}
			},
			//确定回复
			async commentSave() {
				if (this.$.isEmpty(this.commentParams.storeComment)) {
					this.$message.warning('请输入回复内容!')
					return
				}
				const res = await this.$post('/admin/specialSubject/commentUpdateReply', this.commentParams)
				if (res.code == 1000) {
					this.$message.success('回复成功')
					this.getData()
					this.replyVisible = false
				}
			},
			async handleConfigSave() {
				const res = await this.$post('/admin/config/update', {
					id: this.commentConfig.id,
					keyword: this.commentConfig.keyword,
					value: this.commentConfig.value,
				})
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getByKey()
					this.configVisible = false
				}
			},

			async getData() {
				const res = await this.$get('/admin/specialSubject/pageSubjectComment', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			//分页
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData();
			},
			handleSizeChange(val) {
				this.query.pageSize = val
				this.getData();
			},
			handleSearch() {
				this.query.pageNumber = 1
				this.getData();
			},
			handleRefresh() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.getData();
			},
		}
	}
</script>

<style>
</style>